/* ============================ 响应配置 ============================*/
@use "_config/index" as cfg;
@use "variables" as vars;
$tolerance: if(cfg.$env-is-prod, 0, 0.35px);

$breakpoint-presets: (
    'mobile-xs': (max-width:  vars.$breakpoint-xs + $tolerance),
    'mobile-sm': (min-width: vars.$breakpoint-xs + $tolerance, max-width: vars.$breakpoint-sm + $tolerance),
    'tablet': (min-width: vars.$breakpoint-sm + $tolerance, max-width: vars.$breakpoint-md + $tolerance),
    'desktop-sm': (min-width: vars.$breakpoint-md + $tolerance, max-width: vars.$breakpoint-lg + $tolerance),
    'desktop-md': (min-width: vars.$breakpoint-lg + $tolerance, max-width: vars.$breakpoint-xl + $tolerance),
    'desktop-lg': (min-width: vars.$breakpoint-xl + $tolerance)
);

$component-profiles: (
    'article-device': (
        selector: '.device-transform-wrapper',
        breakpoints: map-keys($breakpoint-presets),
        properties: (
            '--device-scale': (0.45, 0.55, 0.75, 0.9, 0.9, 0.9),
        )
    ),
);

/* 移动端响应式调整 */
@media (max-width: vars.$breakpoint-md) {
    .article-meta {
        flex-direction: column; /* 垂直堆叠 */
        align-items: flex-start; /* 左对齐 */
        margin-left: 1rem !important;
        line-height: 1;
        gap: 0.5rem;
    }

    /* 每个元数据项独占一行 */
    .article-meta > span {
        display: block;
        width: 100%;
        margin-bottom: 0.3rem;
    }

    /* 图标和文字间距调整 */
    .article-meta svg {
        margin-right: 0.3em;
    }
}

/* 中等尺寸屏幕调整（768px < x <= 992px） */
@media (max-width: vars.$breakpoint-lg) and (min-width: vars.$breakpoint-md + 1px) {
    .article-meta {
        gap: 0.7rem;
    }
}

/* 大大屏及以下尺寸屏幕调整（x <= 1200px） */
@media (max-width: vars.$breakpoint-xl) {
    .cell.tag_margin, .cell.tag_popout, .margin.docutils.container, aside.margin, div.margin, figure.margin {
        float: none;
        margin-left: 0;
        width: 100%;
    }
}

/* 中等以下尺寸屏幕调整（x <= 992px） */
@media (max-width: vars.$breakpoint-lg) {
    .cell .cell_output .widget-subarea {
        width: 100%;

        .widget-hbox {
            flex-direction: column;
            .widget-inline-hbox {
                width: 95% !important;
                max-width: none !important;
                margin: 5px 0 !important;
                .widget-colorpicker, .widget-dropdown {
                    width: 95%!important;
                    max-width: none !important;
                    display: flex;
                    flex-direction: row;
                }
            }
        }
        .preview-btn-group {
            width: 95%!important;
            display: flex !important;
            flex-direction: row;
            flex-wrap: nowrap; /* 防止换行 */
        }
    }
}